<template>
  <div>
    <p>vuex:状态管理器，用来管理共用数据的状态</p>
    <p>
      原始数据：state中的值.<br />当前年龄：{{ $store.state.age }}、当前数量{{
        $store.state.count
      }}
    </p>
    <p>类似计算属性：getters中的值: {{ $store.getters.nextAge }}</p>
    <p>修改数据</p>
    <button @click="numAdd">数量+1</button>
    <button @click="numMin">数量-1</button>
    <input type="text" v-model="num" />
    <button @click="charge">充满！</button>
    <hr />
    <p>获取积分（使用action）</p>
    <button @click="getMemberPoint">获取积分</button>
    <p>获取积分（避免action）</p>
    <button @click="getUserPoint">获取积分</button>
    <hr />
    <p>
      辅助函数：将store中的state、getters、mutations、actions映射到组件中，方便使用
    </p>
    <p>辅助函数中的count：{{ count }}</p>
    <p>辅助函数中的ageAlias：{{ ageAlias }}</p>
    <p>辅助函数中的nextAge：{{ nextAge }}</p>
    <button @click="min">数量-1</button>
    <input type="text" v-model="num2">
    <button @click="change([num2])">冲钱</button>
    <hr>
    <p>modules中的内容</p>
    <!-- 模块中的state在调用时加上模块名 -->
    <p>user模块中的state：{{$store.state.user.username}}</p>
    <!-- 模块中的getter/mutation/action，在调用时不加模块名 -->
    <p>user模块中的getters：{{$store.getters.sumAge}}</p>
    <el-button icon="el-icon-search" circle></el-button>
  </div>
</template>

<script>
import { ADD } from "../store/mutation-types";
// 使用辅助函数的第一步：导入
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      num: "",
      num2: ""
    };
  },
  computed: {
    // 这里还可以写原来的计算属性
    ...mapState({
      count: (state) => state.count,
      ageAlias: "age",
    }),
    ...mapGetters([
      'nextAge',
      'nextLevel'
    ])
  },
  methods: {
    ...mapMutations([
      'min',
      'change'
    ]),
    numAdd() {
      this.$store.commit(ADD);
    },
    numMin() {
      this.$store.commit("min");
    },
    charge() {
      // 充值，输入框写多少就冲多少
      if (!this.num) {
        alert("请输入正确金额");
      } else {
        // 第二个参数是载荷，要传递的数据
        this.$store.commit('change', [this.num, '$']);
        // 改为对象风格的提交方式
        // this.$store.commit({
        //   type: "changeObj",
        //   payload: [this.num, "$"],
        // });
      }
    },
    getMemberPoint() {
      // 模拟接口！点击会报错
      this.$store.dispatch("getPoint");
    },
    getUserPoint() {
      // 模拟接口！点击会报错
      this.$http.get("/getpoint").then((res) => {
        let point = res.data.point; // 100
        this.$store.commit("setPoint", point);
      });
    },
  },
};
</script>

<style>
</style>